<template>
	<div id="wipe" class="">
	<mt-header   fixed title="活动区">
    	</mt-header>
    	 <mt-swipe :auto="4000">

                    <mt-swipe-item class="slide2"></mt-swipe-item>
                    <mt-swipe-item class="slide3"></mt-swipe-item>
                </mt-swipe>

        <div id="activity">
        <ul>
        <li><a>一元爱心包裹活动<mt-badge type="error" size="small">new</mt-badge></a><hr></li>
        <li><img src="../../assets/hearttwo.jpg"></li>
        <li class="little"><div>捐出一块钱，滴滴快取帮你给山区孩子捐献爱心包裹</div></li>
        </ul>
        </div>
          <div id="activity">
                <ul>
                <li><a>送你免单优惠券+VIP特权<mt-badge type="error" size="small">new</mt-badge></a><hr></li>
                <li><img src="../../assets/activity.jpg"></li>
                <li class="little"><div>@所有人！你要的优惠在这里！</div></li>
                </ul>
                </div>
	</div>
</template>

<script>
export default {
	name: 'swipe',
	data () {
		return {

		}
	},
	methods : {

	},
	computed : {

	}
}
</script>

<style>
#wipe{
width:100%;
height:750px;
}
#activity{
border:2px solid gray;
border-radius:8px;
  width:95%;
    height:200px;
   margin-top:10px;
   margin-left:7px;
}
#activity img {
width:95%;
height:120px;
position:relative;
}
.little{
font-size:10px;
}
.slide2 {
    background-image:url("../../assets/hearttwo.jpg");
    width:100%;
    height:auto;
    background-repeat:no-repeat;
    background-size:cover;
    color: #000;
}

.slide3 {
    background-image:url("../../assets/activity.jpg");
    width:100%;
    height:auto;
    background-repeat:no-repeat;
    background-size:cover;
    color: #fff;
}
</style>